import React, {useState, useRef} from 'react'
import {Button, message, Popconfirm, Divider, notification} from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { connect } from 'umi';
import ProTable from "@ant-design/pro-table";
import BpmProcessForm from "./BpmProcessForm";
import {queryBpmProcessList,saveOrUpdateBpmProcess,deleteBpmProcess} from './service';
import moment from "moment";

const TableList = () => {

  const actionRef = useRef();
  const [loading,setLoading] = useState(false);
  const [visible, setVisible] = useState(null);
  const [record,setRecord] = useState(null);

  const handleCancel = () => {
    setVisible(false);
    setRecord(null);
  };

  const handleSubmit = (values) => {
    setLoading(true);
    saveOrUpdateBpmProcess(values).then((res) => {
      if(res.flag){
        message.success('操作成功！');
        handleCancel();
        actionRef.current.reload();
      }else{
        notification.error({
          message: `请求错误 ${res.status}`,
          description: res.error,
        });
      }
      setLoading(false);
    })
  };

  const delBpmProcess = (id) =>{
    deleteBpmProcess(id).then(res =>{
      if(res.flag){
        message.success('删除成功！');
        actionRef.current.reload();
      }else{
        message.error(res.error);
      }
    })
  };

  const saveOrUpdate = (record) =>{
      if(record){
        setRecord(record);
      }
      setVisible(true);
  };


  const columns = [
    {
      title: '序号',
      render:(text,record,index)=>`${index+1}`,
      hideInSearch: true,
      align:'center'
    },
    {
      title: '体系',
      dataIndex: 'jobSystemName',
      align:'center'
    },
    {
      title: '业务类型',
      dataIndex: 'typeName',
      align:'center',
    },
    {
      title: '流程类型id',
      dataIndex: 'bpmtypeId',
      hideInSearch: true,
      align:'center'
    },
    {
      title: '流程类型名称',
      dataIndex: 'bpmtypeName',
      hideInSearch: true,
      align:'center'
    },
    {
      title: '创建人',
      dataIndex: 'createName',
      hideInSearch: true,
      align:'center'
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      hideInSearch: true,
      align:'center',
      render: (text) => {
        return text ? moment(text).format('YYYY-MM-DD') : ''
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      width: '10%',
      align:'center',
      render: (item, record) => (
        <>
          <a onClick={() => saveOrUpdate(record)}>修改</a>
          <Divider type="vertical"/>
          <Popconfirm title={`是否确认删除?`}
                      onConfirm={() => delBpmProcess(record.id)}
                      okText="是" cancelText="否">
            <a>删除</a>
          </Popconfirm>
        </>
      ),
    },
  ];

  return (
    <PageHeaderWrapper>
      <ProTable
        actionRef={actionRef}
        rowKey="id"
        request={(params) => queryBpmProcessList(params)}
        columns={columns}
        toolBarRender={(action, { selectedRows }) => [
          <Button type="primary" onClick={() => saveOrUpdate(null)}>新建</Button>,
        ]}
      />
      <BpmProcessForm
        record={record}
        loading={loading}
        visible={visible}
        onCancel={handleCancel}
        onSubmit={handleSubmit}
      />
    </PageHeaderWrapper>
  )
};

export default connect(() => ({}))(TableList);
